/**
 * 通过DOM获取标签元素，通过innerHTML赋值实现新的HTML标签
 * @see
 * document https://developer.mozilla.org/zh-CN/docs/Web/API/Document
 * location
 */

let navTabList = document.getElementsByTagName("comp-nav-tab");
console.log(navTabList)

for (let index = 0; index < navTabList.length; index++) {
    let tabEl = navTabList[index];
    tabEl.innerHTML = `
    <!-- 通用导航组件 -->
    <script>
        function router(path){
            location.href = path
        }
    </script>
    <div style="display:flex;position: fixed;bottom: 0px;width:100vw;height:100px;">
        <div style="flex:1;text-align: center;" onclick="router('./page-home.html')">首页</div>
        <div style="flex:1;text-align: center;" onclick="router('./page-travel.html')">去旅游</div>
        <div style="flex:1;text-align: center;" onclick="router('./page-my.html')">我的</div>
    </div>
    `
    
}

document.write(`
<!-- 通用导航组件 -->
<script>
    function router(path){
        location.href = path
    }
</script>
<div style="display:flex;position: fixed;bottom: 0px;width:100vw;height:100px;">
    <div style="flex:1;text-align: center;" onclick="router('./page-home.html')">首页</div>
    <div style="flex:1;text-align: center;" onclick="router('./page-travel.html')">去旅游</div>
    <div style="flex:1;text-align: center;" onclick="router('./page-my.html')">我的</div>
</div>
`)

